<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modrole</title>
    <link rel="stylesheet" th:href="@{css/role.css}">
</head>
<body>
<div>
    <div>
        <input type="text" class="roleId2" name="roleId2" th:value="${role.roleId}" disabled="disabled"  placeholder="角色编号">
    </div>
    <div>
        <input type="text" class="name2" name="name2" th:value="${role.name}" placeholder="角色名称">
    </div>
    <div>
        <input type="text" class="description2" th:value="${role.description}" name="description2" placeholder="角色描述">
    </div>
    <div>
        <button type="button" class="addrolebtn3">确定</button>
        <button type="button" class="retrolebtn3">返回</button>
    </div>
</div>
<script type="text/javascript" th:src="@{jquery-3.5.0.min.js}"></script>
<script>

    $(".retrolebtn3").on('click',function () {
        $(".moddiv").css('display','none');
        $(".loadRole").css('display','block');
    });

    $(".addrolebtn3").on('click',function () {
        console.log("进入提交方法");
        var roleId = $(".roleId2").val().trim();
        var name = $(".name2").val().trim();
        var description = $(".description2").val().trim();
        var url="http://localhost:8080/modRole";
        $.ajax({
            type: "post",
            url:url,
            data:{"roleId":roleId,"name":name,"description":description},
            success:function (data) {
                if (data.status==1){
                    alert(data.msg);
                }else {
                    alert(data.msg);
                }
            },
            fail:function () {
                alert("服务器繁忙");
            },
            complete:function () {
                $(".moddiv").css('display','none');
                $("body").load("http://localhost:8080/role")
            }
        })
    });
</script>
</body>
</html>